<template>
  <div class="paper-update-container">
    <div class="header" v-show="!previewNoRoute"><HeaderComponent /></div>
    <div class="content">
      <ToolbarComponent v-if="!preview" />
      <ContentComponent :answerShow="answerShow"/>
    </div>
  </div>

</template>
<script lang="ts">
import { provide } from 'vue';
import HeaderComponent from './header.vue';
import ToolbarComponent from './toolbar.vue';
import ContentComponent from './content.vue';
import store from './store/index';
import $, { emitter } from '$';
import { ElLoading } from 'element-plus';
import { useRoute } from 'vue-router';

export default {
  components: { HeaderComponent, ToolbarComponent, ContentComponent },
  props: {
    previewNoRoute: {
      type: Boolean,
      default: false,
    },
    idNoRoute: {
      type: String,
      default: ''
    },
    // 一对一被授课第三步显示答案解析
    answerShow: {
      type: Boolean,
      default: false,
    }
  },
  setup(props) {
    let route = useRoute();
    let preview = props.previewNoRoute ? props.previewNoRoute : route.params.preview === 'true';
    let id = props.idNoRoute ? props.idNoRoute : route.params.id;
    let showDownload = route.query.showDownload ? route.query.showDownload : 'true';
    let whiteStyle = route.query.whiteStyle ? route.query.whiteStyle : '';
    provide('id', id)
    provide('preview', preview)
    provide('showDownload', showDownload)
    provide('whiteStyle', whiteStyle)
    provide('syncPractice', route.params.syncPractice)

    const loading = ElLoading.service();
    $.http.post('/tiku/paper/getPaper', { id }).then((res) => {
      res.json.paperCharpts = res.json.paperCharpts.map(quest => {
        quest.questions.map(q => {
          q.question = q.question || { title: '默认标题' };
          q.blankRowCount = q.blankRowCount || 0;
           return q;
        });
        return quest
      } )
      store.commit('set_paper_info', res.json);
      loading.close();
      setTimeout(() => emitter.emit('ready') );
    });

    return { preview }
  }
}
</script>
<style lang="scss" scoped>
  .preview-no-route {
    .paper_container {
      width: 100%;
      padding: 0;
    }
  }

.paper-update-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  & > .header {
    height: 60px;
  }
  & > .content {
    flex: 1 1 60px;
    position: relative;
    overflow: hidden;
  }
  .toolbar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
